<template>
  <section class="hero-section">
    <div class="hero-container">
      <!-- Left Content -->
      <div class="hero-content">
        <h1 class="hero-title">{{ $t('hero.title') }}</h1>
        <p class="hero-subtitle">{{ $t('hero.subtitle') }}</p>
        
        <div class="hero-actions">
          <router-link to="/register">
            <el-button type="primary" size="large" class="primary-action">
              {{ $t('hero.createWallet') }}
            </el-button>
          </router-link>
          <div class="divider">
            <span>{{ $t('hero.or') }}</span>
          </div>
          <router-link to="/login">
            <el-button type="default" size="large" class="secondary-action">
              {{ $t('hero.importAccount') }}
            </el-button>
          </router-link>
        </div>
      </div>
      
      <!-- Right Image -->
      <div class="hero-image">
        <div class="phone-mockup">
          <div class="phone-screen">
            <div class="app-interface">
              <!-- Mock wallet interface -->
              <div class="wallet-header">
                <div class="wallet-logo">
                  <NearLogo :size="24" variant="primary" />
                </div>
                <div class="wallet-title">MyNearWallet</div>
              </div>
              
              <div class="balance-section">
                <div class="balance-label">Available balance</div>
                <div class="balance-amount">$5,847.00038</div>
                <div class="balance-near">@ 500.0345</div>
                <div class="balance-usd">@ 4,508</div>
              </div>
              
              <div class="action-buttons">
                <button class="wallet-btn primary">전송하기</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import NearLogo from '@/components/Common/NearLogo.vue'
</script>

<style scoped lang="scss">
.hero-section {
  min-height: calc(100vh - 64px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  }
  
  .hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    min-height: calc(100vh - 64px);
    position: relative;
    z-index: 1;
  }
  
  .hero-content {
    .hero-title {
      font-size: 48px;
      font-weight: 700;
      color: white;
      margin-bottom: 16px;
      line-height: 1.2;
    }
    
    .hero-subtitle {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 40px;
      line-height: 1.6;
    }
    
    .hero-actions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      
      > a {
        display: block;
      }
      
      .primary-action {
        background: #4f46e5;
        border: none;
        border-radius: 12px;
        padding: 16px 32px;
        font-size: 16px;
        font-weight: 600;
        width: 100%;
        
        &:hover {
          background: #4338ca;
        }
      }
      
      .divider {
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        margin: 8px 0;
      }
      
      .secondary-action {
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        border-radius: 12px;
        padding: 16px 32px;
        font-size: 16px;
        font-weight: 600;
        width: 100%;
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }
  
  .hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    
    .phone-mockup {
      width: 280px;
      height: 560px;
      background: #1a202c;
      border-radius: 32px;
      padding: 8px;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
      transform: rotate(-5deg);
      
      .phone-screen {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 24px;
        overflow: hidden;
        
        .app-interface {
          padding: 24px 20px;
          height: 100%;
          
          .wallet-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 32px;
            
            .wallet-logo {
              width: 32px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            
            .wallet-title {
              font-size: 18px;
              font-weight: 600;
              color: #2d3748;
            }
          }
          
          .balance-section {
            background: #f7fafc;
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
            
            .balance-label {
              font-size: 14px;
              color: #718096;
              margin-bottom: 8px;
            }
            
            .balance-amount {
              font-size: 24px;
              font-weight: 700;
              color: #2d3748;
              margin-bottom: 4px;
            }
            
            .balance-near, .balance-usd {
              font-size: 14px;
              color: #718096;
              margin: 2px 0;
            }
          }
          
          .action-buttons {
            .wallet-btn {
              width: 100%;
              background: #4f46e5;
              color: white;
              border: none;
              border-radius: 12px;
              padding: 16px;
              font-size: 16px;
              font-weight: 600;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1024px) {
  .hero-section {
    .hero-container {
      grid-template-columns: 1fr;
      gap: 40px;
      text-align: center;
      padding: 60px 24px;
      
      .hero-image {
        order: -1;
        
        .phone-mockup {
          width: 240px;
          height: 480px;
          transform: rotate(-2deg);
        }
      }
    }
    
    .hero-content {
      .hero-title {
        font-size: 36px;
      }
    }
  }
}

@media (max-width: 768px) {
  .hero-section {
    .hero-container {
      padding: 40px 16px;
    }
    
    .hero-content {
      .hero-title {
        font-size: 28px;
      }
      
      .hero-subtitle {
        font-size: 16px;
      }
      
      .hero-actions {
        .primary-action,
        .secondary-action {
          width: 100%;
        }
      }
    }
  }
}
</style>